<template>
  <div class="home">
    <el-header>
      <div class="paper-header">
        <div class="paper-name">
          <i class="el-icon-collection"></i>
          家居商城后台管理平台
        </div>
        <div class="paper-set">
          <i class="el-icon-setting"></i>
        </div>
      </div>
    </el-header>
    <el-container class="paper">
      <el-aside width="200px" style="border-right: 1px solid #e6e6e6;">
        <div class="setting">
          <el-row style="margin-top: 10px;">
            <el-col :span="8" style="font-size: 50px;">
              <div class="paper-header">
                <img src="@/assets/header.jpg" alt="">
              </div>
            </el-col>
            <el-col :span="16">
              <div class="paper-info">
                <div>张某某</div>
                <div style="margin-top: 5px;">HS23143</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          text-color="#A4AFC0"
          @select="handleSelect"
          active-text-color="#fff">
          <el-menu-item index="1">
            <i class="el-icon-user-solid"></i>
            <span slot="title">会员管理</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-s-goods"></i>
            <span slot="title">商品管理</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main style="background: #f0eff5;">
        <div class="paper-breadcrumb">
          <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <i class="el-icon-s-home"></i><span style="margin-left: 5px;">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>{{ itemName }}</el-breadcrumb-item>
        </el-breadcrumb>
        </div>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      itemName: '会员管理'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      if(key === '1') {
        this.itemName = '会员管理'
        this.$router.push({path: '/userManager.html'})
      } else if(key === '2') {
        this.itemName = '商品管理'
        this.$router.push({path: '/shopManager.html'})
      } else if(key === '3') {
        this.itemName = '订单管理'
        this.$router.push({path: '/orderManager.html'})
      } else if(key === '4') {
        this.itemName = '系统设置'
        this.$router.push({path: '/systemSet.html'})
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .home{
    height: 100%;
    .el-header{
      padding: 0;
      width: 100%;
      height: 60px;
      line-height: 60px;
    }
    .paper-header{
      display: flex;
      color: #fff;
      background: #3C8DBC;
    }
    .paper-info{
      margin-top: 5px;
      margin-left: 20px;
      text-align: left;
      font-size: 14px;
      font-weight: bold;
    }
    .paper-name{
      flex: 1;
      margin-left: 50px;
      text-align: left;
      font-size: 24px;
      font-weight: bold;
    }
    .paper-set{
      width: 50px;
      font-size: 24px;
      font-weight: bold;
      cursor: pointer;
    }
    .paper-header{
      img{
        width: 100%;
        border-radius: 50%;
      }
    }
    .setting{
      height: 80px;
      font-size: 18px;
      color: #ffffff;
      padding: 40px 15px;
      background: #2F4050;
    }
    .paper{
      height: calc(100% - 60px);
      .el-menu-item{
        font-size: 18px;
        height: 70px;
        line-height: 70px;
        background: #283847;
        text-align: left;
      }
      .el-menu-item.is-active{
        color: #fff;
        background: #1890FF;
      }
      .el-menu-vertical-demo{
        background: #283847;
        border-right: 1px solid rgb(40, 56, 71);
        height: calc(100% - 160px);
      }
    }
    .paper-breadcrumb{
      height: 35px;
      padding: 20px 0 0 20px;
      background: #fff;
      .el-breadcrumb{
        font-size: 16px;
      }
    }
    .el-main{
      padding: 0;
    }
  }
</style>
